{% extends 'base/base.html' %}

{% block title %}
    详情
{% endblock %}

{% block css %}
    <style>
        .collect {
            float: right
        }
    </style>
{% endblock %}



{% block main %}


    {#    <div class="panel panel-default">#}
    {#    {% csrf_token %}#}
    {#  <div class="panel-heading">{{ object.title}}#}
    {#      {% if object|has_collected:request.user %}#}
    {#      <img class="collect" src="/static/img/collect2.png" alt="">  </div>#}
    {#      {% else %}#}
    {#      <img class="collect" src="/static/img/collect.png" alt="">  </div>#}
    {#      {% endif %}#}
    <div class="panel-body">
    <div>
        <h1>{{ object.title }}</h1>
        {% if request.user.is_superuser or request.user.is_staff %}
            该文件的审核状态为：{{ object.get_state_display }}
            <form method="post" action="{% url 'main:files_change_state' object.id %}" style="display:inline">
                {% csrf_token %}
                <select name="state" class="form-control" style="width:auto;display:inline-block">
                    {# 用模型里定义的 STATE_CHOICES 循环 #}

                    <option value="success" {% if object.state == 'success' %}selected{% endif %}>已通过</option>
                    <option value="fail" {% if object.state == 'fail' %}selected{% endif %}>已驳回</option>
                    <option value="undo" {% if object.state == 'undo' %}selected{% endif %}>未处理</option>
                </select>
                <button type="submit" class="btn btn-primary btn-sm">保存状态</button>
            </form>




        {% endif %}
    </div>

    <h3>本文作者：{{ object.author }}</h3>
    {% if user.is_authenticated and object.author == user %}
        <a class="btn btn-primary btn-sm"
           href="{% url 'user:files_update' object.id %}?back={{ request.get_full_path|urlencode }}"
           role="button">编辑</a>

        <a class="btn btn-danger btn-sm"
           href="{% url 'user:files_delete' object.id %}?back={{ request.GET.back|urlencode }}"
           role="button">删除</a>
        <h1>
        </h1>
    {% else %}
    {% endif %}

    {% if request.user.is_superuser or request.user.is_staff %}
        {% if request.user != object.author %}
            <div class="mt-3">
                <small class="text-muted">
                    当前为管理员账号，如果该文章违规可进行
                </small>
                <a class="btn btn-danger btn-sm"
                   href="{% url 'user:files_delete' object.id %}?back={{ request.GET.back|urlencode }}"
                   role="button">删除</a>
            </div>
        {% endif %}
    {% endif %}
    <h5 style="color: gray">#{{ object.tags_str }}</h5>
    <div class="download-section" style="word-wrap: break-word;">
        {{ object.content|safe }}
    </div>

    <div class="download-section">

    <div class="download-section">
        <h5>📥 下载链接</h5>
        {% if can_see_download %}
            {% if object.download_url %}
                <a href="{{ object.download_url }}" class="btn btn-success" target="_blank">
                    <i class="fas fa-download"></i> 下载文件
                </a>
                <p class="text-muted mt-2">
                    <small>链接地址: {{ object.download_url }}</small>
                </p>
            {% else %}
                <p class="text-muted">暂无下载链接</p>
            {% endif %}
        {% else %}
            <div class="alert alert-info">
                <h6>💬 评论后查看下载链接</h6>
                <p>您需要发表评论后才能查看和下载该文件</p>
                {% if not request.user.is_authenticated %}
                    <a href="{% url 'user:login' %}?next={{ request.path }}"
                       class="btn btn-primary btn-sm">登录后评论</a>
                {% endif %}
            </div>
        {% endif %}
    </div>

    <!-- 评论区域 -->
    <div style="word-break: break-word; overflow-wrap: break-word;max-width: 100%;
                                        " class="comment-section">
        <h4>💬 评论 ({{ comment_count }})</h4>

        {% if not can_see_download and request.user.is_authenticated %}
            <div class="alert alert-warning">
                <strong>提示：</strong>发表评论后即可查看下载地址
            </div>
        {% endif %}

        <!-- 评论表单 -->
        {% if request.user.is_authenticated %}
            <div class="comment-form-section">
            <h6>发表评论</h6>
            <form method="post" class="comment-form">
                {% csrf_token %}
                <input type="hidden" name="comment" value="1">
                <div class="form-group">
                    {{ comment_form.content }}
                    {% if comment_form.content.errors %}
                        <div class="text-danger">
                            {{ comment_form.content.errors }}
                        </div>
                    {% endif %}
                </div>
                <button type="submit" class="btn btn-primary">发表评论</button>
            </form>

        {% else %}
            <div class="alert alert-info">
                <a href="{% url 'user:login' %}?next={{ request.path }}" class="btn btn-primary">登录后评论</a>
            </div>
        {% endif %}

        <!-- 评论列表 -->
        <div class="comments-list">
            {% for comment in comments %}
                <div class="comment-item">
                    <div class="comment-meta">
                        <strong>
                            {{ comment.user.username }}
                            {% if comment.user == object.author %}
                                <span class="label label-primary">作者</span>

                            {% endif %}
                        </strong>
                        <span class="text-muted">{{ comment.created_time|date:"Y-m-d H:i" }}</span>
                        {% if request.user == comment.user or request.user.is_staff or request.user == object.author %}
                            <form method="post" action="{% url 'main:comment_delete' comment.id %}"
                                  class="d-inline"
                                  onsubmit="return confirm('确定删除这条评论？');">
                                {% csrf_token %}
                                <input type="hidden" name="back" value="{{ request.build_absolute_uri }}">
                                <button type="submit" class="btn btn-sm btn-outline-danger pull-right">删除
                                </button>
                            </form>
                        {% endif %}
                    </div>

                    <div class="comment-content">
                        {{ comment.content|linebreaks }}
                    </div>

                </div>
            {% endfor %}

        </div>
        </div>

    </div>


    {# 反馈按钮 #}
    {% if user.is_authenticated %}
        若文章或链接有问题，可点此进行
<button type="button" class="btn btn-warning btn-sm" data-toggle="modal" data-target="#feedbackModal">
  反馈
</button>

<div class="modal fade" id="feedbackModal" tabindex="-1">
  <div class="modal-dialog">
    <div class="modal-content">
      <div class="modal-header">
        <button type="button" class="close" data-dismiss="modal">&times;</button>
        <h4 class="modal-title">向作者反馈</h4>
      </div>
      <div class="modal-body">
        <div class="alert alert-info">文章：《{{ object.title }}》</div>
        <div class="form-group">
          <label>反馈内容</label>
          <textarea id="feedback_content" name="content" class="form-control" rows="4" placeholder="请写下您的建议或问题"></textarea>
        </div>
        <input type="hidden" id="feedback_title" value="{{ object.title }}">
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-default" data-dismiss="modal">取消</button>
        <button type="button" class="btn btn-primary" onclick="sendFeedback()">发送</button>
      </div>
    </div>
  </div>
</div>
{% endif %}
{% endblock %}

{% block extra_js %}
<script>
function sendFeedback(){
    const title   = document.getElementById('feedback_title').value.trim();
    const content = document.getElementById('feedback_content').value.trim();
    if (!content){ alert('内容不能为空'); return; }

    fetch("{% url 'messagesite:file_feedback' object.id %}", {
        method : 'POST',
        headers: {
            'X-CSRFToken': getCookie('csrftoken'),
            'X-Requested-With': 'XMLHttpRequest'
        },
        body: new URLSearchParams({title, content})
    })
    .then(res => res.json())
    .then(data => {
        alert(data.msg);
        if (data.status === 'ok'){
            $('#feedbackModal').modal('hide');
            document.getElementById('feedback_content').value = '';
        }
    })
    .catch(err => { alert('网络错误'); console.error(err); });
}

function getCookie(name) {
    let r = document.cookie.match('\\b' + name + '=([^;]*)\\b');
    return r ? r.pop() : '';
}
</script>
{% endblock %}